<include file="../header"/>
<body>
<include file="../loadding"/>
<div class="wraper flex-box item-col between">
    <div class="body box-auto flex-box flex-start">
        <div class="menu_classify">
            <volist name="allCategory" id="vo">
                <if condition="$i eq 1">
                    <a href="javascript:;" class="classify-list actived" data-id="{BEESCRM:$vo.category_id}">{BEESCRM:$vo.category_name}</a>
                 <else/>
                    <a href="javascript:;" class="classify-list" data-id="{BEESCRM:$vo.category_id}">{BEESCRM:$vo.category_name}</a>
                </if>
            </volist>
        </div>
        <div class="menu flex-box flex-start wrap"></div><!--菜品列表-->

        <div class="cart-cover"></div><!--购物车遮罩-->
        <div class="cart">
            <p class="title flex-box between"><span>已点菜品</span><span class="delete-all">一键清空</span></p>
            <div class="cartlistbox"></div><!--购物车清单-->
        </div>
    </div>
    <div class="footer flex-box">
        <div class="footer_l">
            <span class="iconfont icon-weiwaimai"></span>
            <span class="cart-num">0</span>
        </div>
        <div class="footer_c box-auto"><span>0.00</span>元</div>
        <div class="footer_r flex-box"><a href="javascript:;" class="pay">去结算</a></div>
    </div>


    <input value="{BEESCRM:$restaurant_id}" id="restaurant_id" hidden/>
    <input value="{BEESCRM:$res_id}" id="res_id" hidden/>
</div>

<div class="qrcode-cover flex-center"></div>



<include file="../commonJS" />
<script type="text/x-handlebars-template" id="product-tpl">
    {{#each product}}
        <div class="menu-list menu-list-{{goods_id}}" data-id="{{goods_id}}">
            <div class="flex-box item-col flex-start">
                <div class="goods_img">
                    <img src="{{goods_logo}}"/>
                    <div class="flex-box between">
                        <p class="box-auto">{{goods_name}}</p>
                        <p class="text-red">￥<span class="single-price">{{price}}</span></p>
                    </div>
                </div>
            </div>
            <p class="tips tips-{{goods_id}} {{tips_status}}">{{cart_num}}</p>
        </div>
    {{/each}}
</script>
<script type="text/x-handlebars-template" id="cartbox-tpl">
    {{#each cartbox}}
        <div class="cart-list flex-box cart-list-{{goods_id}}">
            <p class="box-auto">{{goods_name}}</p>
            <p>￥<span class="sum-price-{{goods_id}}">{{sum_price}}</span></p>
            <div class="tb-mode amount">
                <a href="#" class="tb-cell change-num-btn" data-goodsid="{{goods_id}}" data-price="{{price}}" data-type="2">-</a>
                <input type="text" class="tb-cell buy-count buy-count-{{goods_id}}" readonly value="{{cart_num}}" data-old_num="{{cart_num}}" data-goodsid="{{goods_id}}" data-price="{{price}}" data-type="3">
                <a href="#" class="tb-cell change-num-btn" data-goodsid="{{goods_id}}" data-price="{{price}}" data-type="1">+</a>
            </div>
        </div>
    {{/each}}
</script>
<script type="text/x-handlebars-template" id="cart-tpl">
    <div class="footer_l">
        <span class="iconfont icon-weiwaimai"></span>
        <span class="cart-num">{{product.all_number}}</span>
    </div>
    <div class="footer_c box-auto"><span id="total-cost">{{product.all_price}}</span>元</div>
    <div class="footer_r flex-box"><a href="javascript:;" class="pay">去结算</a></div>
</script>

<script>
    $(function(){
        var height_ = $('.body').height();
        $('.menu_classify,.menu').css('maxHeight',height_);

        var productSource = $("#product-tpl").html();
        var productTpl = Handlebars.compile(productSource);
        var elem = $('.menu');

        var cartboxSource = $("#cartbox-tpl").html();
        var cartboxTpl = Handlebars.compile(cartboxSource);
        var cartbox = $('.cartlistbox');

        var cartSource = $("#cart-tpl").html();
        var cartTpl = Handlebars.compile(cartSource);
        var cart = $('.footer');

        var restaurant_id = $('#restaurant_id').val();
        var category_id = $('.actived').data('id');
        var res_id = $('#res_id').val();

        var type;


        renderGoodsList(restaurant_id, category_id, res_id);

        $('.classify-list').click(function(){
            category_id = $(this).data('id');
            $('.classify-list').removeClass('actived');
            $(this).addClass('actived');
            $('#category_id').val(category_id);
            renderGoodsList(restaurant_id, category_id, res_id);
        });

        $(document).on('click','.footer_l',function(){
            $('.cart-cover').toggleClass('show');
            $('.cart').toggleClass('cart-show');
            if($('.cart').hasClass('cart-show')){
                renderPopCart(restaurant_id);
            }
        });
        $('.cart-cover').click(function(){
            $('.cart-cover').removeClass('show');
            $('.cart').removeClass('cart-show');
        })

        $(document).on('click','.footer_r',function(){
            $('.cart-cover').removeClass('show');
            $('.cart').removeClass('cart-show');
            $.ajax({
                type: "post",
                url: "/restaurant/ZduRestaurant/ajaxAddOrder",
                data: {
                    restaurant_id: restaurant_id,
                    res_id: res_id
                },
                dataType: "json",
                beforeSend:function(){
                    $('.circle-loadding').show();
                },
                success:function(res){
                    $('.circle-loadding').hide();
                    if (res.status == 'S') {
                        var order_id = res.data.order_id;
                        var mes = '<p>订单金额</p><p style="font-size: 4vw;color: #ff5959;">'+ res.data.order_amount + '元</p><p>是否打印订单?</p>';
                        fm.confirm(mes,function(callback){
                            if(callback == 1){
                                print(order_id);
                            }else{
                                cancelOrder(order_id);
                            }
                        });
                    }else{
                        fm.alert(res.message);
                    }
                }
            })
        });


        $(document).on('click','.menu-list',function(){
            type = 1;
            var goods_id = $(this).data('id');
            var goods_num = 1;
            var buy_num = Number($('.tips-'+ goods_id).html());
            var single_price = Number($(this).find('.single-price').html());
            updateCart(restaurant_id,goods_id,goods_num,buy_num,single_price,type);
        });

        $(document).on('click','.change-num-btn',function(){
            type = $(this).data('type');
            var goods_id = $(this).data('goodsid');
            var buy_num = Number($('.buy-count-'+ goods_id).val());
            var single_price = Number($(this).data('price'));
            var goods_num = 1;
            updateCart(restaurant_id,goods_id,goods_num,buy_num,single_price,type);
        });

        $('.delete-all').click(function(){
            $.ajax({
                type: "post",
                url: "/restaurant/ZduRestaurant/emptyRestaurantCart",
                data: {
                    restaurant_id: restaurant_id
                },
                dataType: "json",
                beforeSend:function(){
                    $('.circle-loadding').show();
                },
                success:function(res){
                    $('.circle-loadding').hide();
                    if (res.status == 'S') {
                        fm.alert(res.message);
                        location.reload();
                    }else{
                        fm.alert(res.message);
                    }
                }
            })
        })

        //载入菜品数据
        function renderGoodsList(restaurant_id, category_id, res_id){
            $.ajax({
                type: "post",
                url: "/restaurant/ZduRestaurant/ajaxGetCategoryGoods",
                data: {
                    restaurant_id: restaurant_id,
                    category_id: category_id,
                    res_id: res_id
                },
                dataType: "json",
                beforeSend:function(){
                    $('.circle-loadding').show();
                },
                success:function(res){
                    $('.circle-loadding').hide();
                    if (res.status == 'S') {
                        if(res.data.length > 0) {
                            $.each(res.data,function(i,k){
                                if(k.cart_num == 0 || k.cart_num == undefined){
                                   k.tips_status = 'hide';
                                }
                            });
                            elem.html(productTpl({product: res.data}));
                        }
                        cart.html(cartTpl({product: res}));
                    }else{
                        elem.css('height',height_);
                        elem.html('<p class="none_">暂无菜品</p>');
                    }

                    var img_width = $('.goods_img').width();
                    $('.goods_img').css('height',img_width);
                }
            })
        }

        //购物车清单
        function renderPopCart(restaurant_id) {
            $.ajax({
                type: "post",
                url: "/restaurant/ZduRestaurant/ajaxListCart",
                data: {
                    restaurant_id: restaurant_id
                },
                dataType: "json",
                beforeSend:function(){
                    $('.circle-loadding').show();
                },
                success:function(res){
                    $('.circle-loadding').hide();
                    if (res.status == 'S') {
                        if(res.data.length > 0) {
                            cartbox.html(cartboxTpl({cartbox: res.data}));
                        }
                    }else{
                        fm.alert(res.message);
                    }
                }
            })
        }

        //更新购物车
        function updateCart(restaurant_id,goods_id,goods_num,buy_num,single_price,type){
            $.ajax({
                type: "post",
                url: "/restaurant/ZduRestaurant/ajaxUpdateCart",
                data: {
                    restaurant_id: restaurant_id,
                    goods_id: goods_id,
                    goods_num: goods_num,
                    type: type
                },
                dataType: "json",
                beforeSend:function(){
                    $('.circle-loadding').show();
                },
                success:function(res){
                    $('.circle-loadding').hide();
                    if (res.status == 'S') {
                        var cart_num = Number($('.cart-num').html());
                        var total_cost = Number($('#total-cost').html());
                        var sum_price = Number($('.sum-price-'+ goods_id).html());

                        if(type == 1){
                            cart_num++;
                            buy_num++;
                            total_cost += single_price;
                            sum_price += single_price;
                            change(cart_num,buy_num,total_cost,sum_price);
                        }else if(type == 2){
                            cart_num--;
                            buy_num--;
                            total_cost -= single_price;
                            sum_price -= single_price;
                            change(cart_num,buy_num,total_cost,sum_price);
                            if(buy_num == 0){
                                $('.cart-list-'+goods_id).remove();
                                $('.tips-'+ goods_id).addClass('hide');
                            }
                        }else{
                            var old_num = Number($('.buy-count-'+ goods_id).data('old_num'));
                            cart_num = cart_num + (buy_num - old_num);
                            sum_price = buy_num * single_price;
                            total_cost = total_cost + single_price * (buy_num - old_num);
                            change(cart_num,buy_num,total_cost,sum_price);
                            if(buy_num == 0){
                                $('.cart-list-'+goods_id).remove();
                                $('.tips-'+ goods_id).addClass('hide');
                            }
                        }

                        function change(cart_num,buy_num,total_cost,sum_price){
                            $('.cart-num').html(cart_num);
                            $('.buy-count-'+goods_id).val(buy_num);
                            $('.tips-'+ goods_id).html(buy_num).removeClass('hide');
                            $('#total-cost').html(parseFloat(total_cost).toFixed(2));
                            $('.sum-price-'+ goods_id).html(parseFloat(sum_price).toFixed(2));
                        }
                    } else{
                        fm.alert(res.message);
                    }
                }
            })
        }

        function print(order_id){
            $.ajax({
                type: "post",
                url: "/restaurant/ZduRestaurant/offlinePayOrder",
                data: {
                    order_id: order_id
                },
                dataType: "json",
                beforeSend:function(){
                    $('.circle-loadding').show();
                },
                success:function(res){
                    $('.circle-loadding').hide();
                    if (res.status == 'S') {
                        fm.alert(res.message);
                        setTimeout(function(){
                            location.reload();
                        },2000)
                    }else{
                        fm.alert(res.message);
                    }
                }
            })
        }

        //取消订单
        function cancelOrder(order_id){
            $.ajax({
                type: "post",
                url: "/restaurant/ZduRestaurant/cancelOrder",
                data: {
                    order_id: order_id
                },
                dataType: "json",
                beforeSend:function(){
                    $('.circle-loadding').show();
                },
                success:function(res){
                    $('.circle-loadding').hide();
                    if (res.status == 'S') {
                        fm.alert(res.message);
                        setTimeout(function(){
                            location.reload();
                        },2000)
                    }else{
                        fm.alert(res.message);
                    }
                }
            })
        }
    });


</script>
</body>
</html>